<template>
  <div class="launch-wrapper">
    <common-back :content="title"></common-back>
    <ul class="list">
      <li class="nav-item"
          border-bottom-1px>
        <div class="title">会议名称：</div>
        <input type="text"
               placeholder="请输入会议名称"
               v-model="meetingName">
      </li>
      <!-- <li class="nav-item"
          border-bottom-1px
          @click="handleShow">
        <div class="title">辅导员：<span>{{content}}</span></div>
      </li> -->
    </ul>
    <common-button :content="buttonTitle"
                   @submit="handleSubmit"></common-button>
    <van-popup v-model="show"
               position="bottom"
               :overlay="true">
      <van-picker show-toolbar
                  title="标题"
                  :columns="columns"
                  @cancel="onCancel"
                  @confirm="onConfirm" />
    </van-popup>

  </div>
</template>
<script>
import CommonButton from 'common/button/button'
import CommonBack from 'common/headerBack/back'
export default {
  name: 'mettingLaunch',
  components: {
    CommonBack,
    CommonButton
  },
  data () {
    return {
      title: '发起会议',
      meetingName: '',
      buttonTitle: '提交',
      show: false,
      list: [],
      id: 0,
      content: '请选择辅导员'
    }
  },
  created () {
    this.getSubmit()
  },
  computed: {
    columns () {
      const result = []
      this.list.map((item) => {
        result.push(item.wechat_name)
      })
      return result
    }
  },
  methods: {
    handleSubmit () {
      if (this.meetingName === '') {
        this.$tip('会议名称不能为空')
        return false
      }
      this.postSubmit()
    },
    getSubmit () {
      this.$api.meeting.getSubmit()
        .then(this.getSubmitSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    getSubmitSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK && res.data) {
        const data = res.data
        console.log(data)
        this.list = data.instructor
      }
    },
    postSubmit () {
      const id = this.id
      const name = this.meetingName
      this.$api.meeting.postSubmit({ id, meeting_name: name })
        .then(this.postSubmitSucc)
        .catch((e) => {
          this.$errorTip()
        })
    },
    postSubmitSucc (res) {
      res = res.data
      if (res.code === this.$api.CODE_OK) {
        this.$tip(res.msg)
      } else if (res.code === this.$api.CODE_ERR) {
        this.$tip(res.msg)
      }
    },
    onConfirm (value, index) {
      this.content = value
      this.show = false
    },
    onCancel () {
      this.show = false
    },
    handleShow () {
      this.show = true
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '~stylus/variable.styl'
@import '~stylus/mixins.styl'

.launch-wrapper >>> .van-picker__toolbar
  height 80px

.launch-wrapper >>> .van-picker__cancel, .launch-wrapper >>> .van-picker__confirm, .launch-wrapper >>> .van-picker__title
  font-size $shop_name
  display flex
  align-items center
  height 80px

.launch-wrapper >>> .van-picker-column__item--selected
  font-size $shop_name
  height 80px

.launch-wrapper
  initPosition()
  overflow-y scroll
  background-color $common_bgc
  z-index 20
  padding-top 98px
  box-sizing border-box

  .list
    width 100%

    .nav-item
      width 100%
      height 109px
      display flex
      align-items center

      .title
        padding-left 20px
        height 100%
        line-height 109px
        font-size $shop_name
        font-weight 400
        color $footer_bgc

        span
          color #757575

      input
        flex 1
        padding-right 10px
        border none
        height 100%
        display flex
        align-items center
        font-size $shop_name
        font-weight 400
        color $location
        background-color #fff
</style>
